<template>
	<view class="devices-container">
		<view class="section-title">
			<icon class="ic-shebei iconfont bs-shebei" type=""></icon>
			<text>可用设备</text>
		</view>

		<view class="devices">
			<view class="device-list">
				<compSysListItem v-if="sbData.length > 0" v-for="(item, index) in sbData" :key="index" :item="item"
					isShowStatus :confirmDate="confirmDate">
				</compSysListItem>
			</view>
		</view>

		<uv-empty mode="data" icon="/static/img/kong.png" v-if="sbData.length <= 0"></uv-empty>
	</view>
</template>

<script lang="ts" setup>
import db from '@/api/database'
import { ref, nextTick, onMounted } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import compSysListItem from '@/pages/sys/comps/comp-sys-list-item.vue'
const props = defineProps({
	sysId: {
		type: Object,
		default: {},
	},
})

const sbData = ref([])
const confirmDate = ref({ year: new Date().getFullYear(), month: new Date().getMonth() + 1, day: new Date().getDate() })

async function fetchData() {
	try {
		const res = await db.collection('sblb').where({
			sysID: props.sysId,
		}).get()
		sbData.value = res.data
	} catch (error) {
		console.error('查询数据失败:', error)
	}
}

onShow(() => {
	if (props.sysId) fetchData()
})


</script>

<style lang="scss" scoped>
@import "/static/css/iconfont.css";

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.devices-container {
	width: 100%;
	animation: fadeIn 0.5s ease-out;

	.section-title {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
		padding: 0 5px;

		.ic-shebei {
			font-size: 22px;
			color: #2196f3;
			margin-right: 8px;
		}

		text {
			font-size: 16px;
			font-weight: bold;
			color: #333;
		}
	}
}

.devices {
	width: 100%;
}

.device-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
}
</style>